<!doctype html>
<html>
    <head>
        <title>风格手册 - HT for Web</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css">
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white;
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;
            }
            .logo{
                vertical-align: middle;
            }

        </style>
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }

                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];

                    // a small hack to make it work on android
                    iframe.ontouchstart = func;

                    if (window.location && window.location.hostname && window.location.hostname.indexOf('hightopo') >= 0) {
                        var div = document.createElement('div');
                        div.style.float = 'left';
                        div.innerHTML = '<a href="https://hightopo.com/codeeditor/index.html?url=' + iframe.contentWindow.location.pathname + '" target="_blank">在线编辑</a>';
                        iframe.parentNode.insertBefore(div, iframe);

                        var div = document.createElement('div');
                        div.style.float = 'left';
                        div.innerHTML = '&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;';
                        iframe.parentNode.insertBefore(div, iframe);
                    }

                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }
            }
        </script>
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 风格手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_overview">概述</a></li><li><a href="#ref_config">配置</a><ul><li><a href="#ref_color">ht.Color</a></li><li><a href="#ref_default">ht.Default</a></li><li><a href="#ref_style">ht.Style</a></li></ul></li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<p><code>HT for Web</code>默认具有一套整体性的风格效果，在各种组件中保持一致的颜色，尺寸和操作习惯，
但用户客户根据具体使用需要进行定制，改变风格以适应不同项目或行业的效果需求。</p>

<p><iframe src="examples/example_default.html" style="height:400px"></iframe></p>

<div id="ref_config"></div>

<h2>配置</h2>

<p>改变<code>HT</code>系统默认属性，需要通过全局的<code>htconfig</code>变量名指定，<code>HT</code>系统只在初始化时读取<code>htconfig</code>的配置信息，
因此该属性必须在引入<code>ht.js</code>包之前初始化好，运行状态时修改<code>htconfig</code>变量不会再起作用，示例代码如下：</p>

<pre><code>&lt;script&gt;
    htconfig = {
        Color: {          
            label: &#39;#000&#39;,
            highlight: &#39;#1ABC9C&#39;,           
        },
        Default: {
            toolTipDelay: 100,
            toolTipContinual: true
        },                
        Style: {
            &#39;select.color&#39;: &#39;#E74C3C&#39;,
            &#39;select.width&#39;: 3
        }
    };
&lt;/script&gt;           
&lt;script src=&quot;ht.js&quot;&gt;&lt;/script&gt;   </code></pre>

<p>可配置的参数分为三大类：</p>

<ul><li>配置全局的默认颜色主题，最终设置到<code>ht.Color</code>对象属性上</li><li>配置系统的参数、以及组件的默认参数，最终设置到<code>ht.Default</code>对象属性上</li><li>配置<code>GraphView</code>和<code>Graph3dView</code>组件上图元的默认参数，最终设置到<code>ht.Style</code>对象属性上</li></ul>

<div id="ref_color"></div>

<h3>ht.Color</h3>

<p><code>ht.Color</code>是为简化颜色主题自定义而抽象的一组颜色属性集，<code>HT</code>系统中所有颜色都取之于这组颜色集，
每个属性对应一到多个<code>ht.Default</code>，<code>ht.Style</code>或预定义矢量图片中的具体属性。</p>

<p><code>ht.Default.listViewSelectBackground</code>和<code>ht.Default.treeViewSelectBackground</code>初始值都由<code>ht.Color.highlight</code>值决定的，因此：</p>

<ul><li>改变<code>ht.Color.highlight</code>值，可改变所有列表和树组件的选中颜色</li><li>改变<code>ht.Default.listViewSelectBackground</code>值，可改变所有列表组件的选中颜色</li><li>改变<code>ht.Default.treeViewSelectBackground</code>值，可改变所有树组件的选中颜色</li><li>调用<code>listView.setSelectBackground(&#39;blue&#39;)</code>，可改变具体列表组件对象的选中颜色</li><li>调用<code>treeView.setSelectBackground(&#39;blue&#39;)</code>，可改变具体树组件对象的选中颜色</li></ul>

<p><iframe src="examples/example_htcolor.html" style="height:400px"></iframe></p>

<p>以下是<code>ht.Color</code>每个颜色对应的具体属性</p>

<ul><li><p><code>highlight</code></p><ul><li><code>ht.Style[&#39;select.color&#39;]</code></li><li><code>ht.Style[&#39;note.background&#39;]</code></li><li><code>ht.Style[&#39;note2.background&#39;]</code>    </li><li><code>ht.Default.accordionViewSelectBackground</code></li><li><code>ht.Default.propertyViewSelectBackground</code></li><li><code>ht.Default.listViewSelectBackground</code></li><li><code>ht.Default.treeViewSelectBackground</code></li><li><code>ht.Default.tableViewSelectBackground</code></li><li><code>ht.Default.treeTableViewSelectBackground</code></li><li><code>ht.Default.tableHeaderInsertColor</code></li><li><code>ht.Default.tabViewSelectBackground</code></li><li><code>ht.Default.tabViewInsertColor</code></li><li><code>ht.Default.toolbarSelectBackground</code></li><li><code>ht.Default.buttonSelectBackground</code></li><li><code>ht.Default.comboBoxSelectBackground</code></li><li><p><code>ht.Default.propertyPaneSelectBackground</code></p></li></ul></li><li><p><code>label</code></p><ul><li><code>ht.Default.labelColor</code></li><li><code>ht.Default.toolbarLabelColor</code></li><li><code>ht.Style[&#39;label.color&#39;]</code></li><li><code>ht.Style[&#39;label2.color&#39;]</code></li><li><code>ht.Default.propertyViewLabelColor</code></li><li><code>ht.Default.listViewLabelColor</code></li><li><code>ht.Default.treeViewLabelColor</code></li><li><code>ht.Default.tableViewLabelColor</code></li><li><code>ht.Default.treeTableViewLabelColor</code></li><li><code>ht.Default.tableHeaderLabelColor</code></li><li><code>ht.Default.toolbarLabelColor</code>     </li><li><code>ht.Default.textFieldColor</code></li><li><code>ht.Default.textAreaColor</code></li><li><code>ht.Default.radioButtonLabelColor</code></li><li><code>ht.Default.checkBoxLabelColor</code></li><li><code>ht.Default.buttonLabelColor</code></li><li><code>ht.Default.comboBoxLabelColor</code></li><li><code>ht.Default.formPaneLabelColor</code>   </li><li><p><code>ht.Default.propertyPaneHeaderLabelColor</code>   </p></li></ul></li><li><p><code>labelSelectColor</code></p><ul><li><code>ht.Style[&#39;note.color&#39;]</code></li><li><code>ht.Style[&#39;note2.color&#39;]</code></li><li><code>ht.Style[&#39;group.title.color&#39;]</code></li><li><code>ht.Default.accordionViewLabelColor</code></li><li><code>ht.Default.propertyViewLabelSelectColor</code></li><li><code>ht.Default.listViewLabelSelectColor</code></li><li><code>ht.Default.treeViewLabelSelectColor</code></li><li><code>ht.Default.tableViewLabelSelectColor</code></li><li><code>ht.Default.treeTableViewLabelSelectColor</code></li><li><code>ht.Default.tabViewLabelColor</code></li><li><code>ht.Default.toolbarLabelSelectColor</code></li><li><code>ht.Default.buttonLabelSelectColor</code></li><li><p><code>ht.Default.comboBoxLabelSelectColor</code></p></li></ul></li><li><p><code>transparent</code></p><ul><li><code>ht.Default.scrollBarColor</code></li><li><code>ht.Default.toolTipShadowColor</code></li><li><code>ht.Default.tableHeaderMoveBackground</code></li><li><code>ht.Default.tabViewMoveBackground</code></li><li><code>ht.Default.overviewMaskBackground</code></li><li><p><code>ht.Default.comboBoxShadowColor</code></p></li></ul></li><li><p><code>titleBackground</code></p><ul><li><code>ht.Default.accordionViewTitleBackground</code></li><li><code>ht.Default.splitViewDividerBackground</code></li><li><p><code>ht.Default.tabViewTabBackground</code></p></li></ul></li><li><p><code>titleIconBackground</code></p><ul><li><code>ht.Default.accordionViewExpandIcon</code>矢量图标背景色</li><li><p><code>ht.Default.accordionViewCollapseIcon</code>矢量图标背景色</p></li></ul></li><li><p><code>headerBackground</code></p><ul><li><code>ht.Default.propertyViewBackground</code></li><li><code>ht.Default.tableHeaderBackground</code></li><li><code>ht.Default.toolbarBackground</code></li><li><p><code>ht.Default.propertyPaneHeaderBackground</code></p></li></ul></li><li><p><code>headerIconBackground</code></p><ul><li><code>ht.Default.propertyViewExpandIcon</code>矢量图标背景色</li><li><code>ht.Default.propertyViewCollapseIcon</code>矢量图标背景色</li><li><code>ht.Default.tableHeaderSortDescIcon</code>矢量图标背景色</li><li><p><code>ht.Default.tableHeaderSortAscIcon</code>矢量图标背景色</p></li></ul></li><li><p><code>headerSeparator</code></p><ul><li><p><code>ht.Default.toolbarSeparatorColor</code></p></li></ul></li><li><p><code>headerLine</code></p><ul><li><p><code>ht.Default.tableHeaderColumnLineColor</code></p></li></ul></li><li><p><code>background</code></p><ul><li><code>ht.Default.overviewContentBackground</code></li><li><code>ht.Default.comboBoxBackground</code></li><li><p><code>ht.Default.dialogContentBackground</code></p></li></ul></li><li><p><code>disabledBackground</code></p><ul><li><p><code>ht.Default.disabledBackground</code></p></li></ul></li><li><p><code>toolTipBackground</code></p><ul><li><p><code>ht.Default.toolTipBackground</code></p></li></ul></li><li><p><code>rectSelectBorder</code></p><ul><li><p><code>ht.Default.graphViewRectSelectBorderColor</code></p></li></ul></li><li><p><code>rectSelectBackground</code></p><ul><li><code>ht.Default.graphViewRectSelectBackground</code></li><li><p><code>ht.Default.graph3dViewRectSelectBackground</code></p></li></ul></li><li><p><code>editPointBorder</code></p><ul><li><p><code>ht.Default.graphViewEditPointBorderColor</code></p></li></ul></li><li><p><code>editPointBackground</code></p><ul><li><p><code>ht.Default.graphViewEditPointBackground</code></p></li></ul></li><li><p><code>dash</code></p><ul><li><code>ht.Style[&#39;shape.dash.color&#39;]</code></li><li><p><code>ht.Style[&#39;edge.dash.color&#39;]</code></p></li></ul></li><li><p><code>groupBackground</code></p><ul><li><p><code>ht.Style[&#39;group.background&#39;]</code></p></li></ul></li><li><p><code>groupTitleBackground</code></p><ul><li><p><code>ht.Style[&#39;group.title.background&#39;]</code></p></li></ul></li><li><p><code>gridBackground</code></p><ul><li><p><code>ht.Style[&#39;grid.background&#39;]</code></p></li></ul></li><li><p><code>reverse</code></p><ul><li><code>ht.Style[&#39;label.reverse.color&#39;]</code></li><li><code>ht.Style[&#39;label2.reverse.color&#39;]</code></li><li><code>ht.Style[&#39;note.reverse.color&#39;]</code></li><li><code>ht.Style[&#39;note2.reverse.color&#39;]</code></li><li><code>ht.Style[&#39;shape3d.reverse.color&#39;]</code></li><li><p><code>ht.Style[&#39;all.reverse.color&#39;]</code>  </p></li></ul></li><li><p><code>contentIconBackground</code></p><ul><li><code>ht.Default.treeViewExpandIcon</code>矢量图标背景色</li><li><code>treeViewCollapseIcon</code>矢量图标背景色</li><li><code>treeTableViewExpandIcon</code>矢量图标背景色</li><li><p><code>treeTableViewCollapseIcon</code>矢量图标背景色</p></li></ul></li><li><p><code>contentLine</code></p><ul><li><code>ht.Default.propertyViewRowLineColor</code></li><li><code>ht.Default.propertyViewColumnLineColor</code></li><li><code>ht.Default.listViewRowLineColor</code></li><li><code>ht.Default.treeViewRowLineColor</code></li><li><code>ht.Default.tableViewRowLineColor</code></li><li><code>ht.Default.tableViewColumnLineColor</code></li><li><code>ht.Default.treeTableViewRowLineColor</code></li><li><p><code>ht.Default.treeTableViewColumnLineColor</code></p></li></ul></li><li><p><code>widgetBackground</code></p><ul><li><code>ht.Default.buttonBackground</code></li><li><code>ht.Default.sliderButton</code>矢量图标背景色</li><li><p><code>ht.Default.overviewBackground</code></p></li></ul></li><li><p><code>widgetBorder</code></p><ul><li><code>ht.Default.textFieldBorderColor</code></li><li><code>ht.Default.textAreaBorderColor</code></li><li><code>ht.Default.radioButtonPressBackground</code></li><li><code>ht.Default.checkBoxPressBackground</code></li><li><code>ht.Default.buttonBorderColor</code></li><li><code>ht.Default.comboBoxBorderColor</code></li><li><p><code>ht.Default.overviewContentBorderColor</code></p></li></ul></li><li><p><code>widgetIconBackground</code></p><ul><li><p><code>widget</code>组件相关矢量图标背景色</p></li></ul></li><li><p><code>widgetIconBorder</code></p><ul><li><p><code>widget</code>组件相关矢量图标边框颜色</p></li></ul></li><li><p><code>widgetIconGradient</code></p><ul><li><p><code>widget</code>组件相关矢量图标渐进色</p></li></ul></li><li><p><code>widgetIconHighlight</code></p><ul><li><p><code>widget</code>组件相关矢量图标高亮色，一般用于表示选中状态</p></li></ul></li><li><p><code>imageBackground</code>    </p><ul><li><p><code>Data</code>类型图元<code>icon</code>和<code>image</code>对应矢量图片背景色</p></li></ul></li><li><p><code>imageGradient</code>    </p><ul><li><p><code>Data</code>类型图元<code>icon</code>和<code>image</code>对应矢量图片渐进色</p></li></ul></li><li><p><code>chart</code>
图表默认颜色数组</p></li></ul>

<p><iframe src="examples/example_light.html" style="height:400px"></iframe></p>

<p><iframe src="examples/example_blue.html" style="height:400px"></iframe></p>

<p><iframe src="examples/example_dark.html" style="height:400px"></iframe></p>

<p><iframe src="examples/example_ocean.html" style="height:400px"></iframe></p>

<div id="ref_default"></div>

<h3>ht.Default</h3>

<p><code>ht.Default</code>定义了所有组件的默认参数值，命名规范以组件名+属性名的结合方式，例如树组件<code>TreeView</code>的行线是否显示属性<code>rowLineVisible</code>，
该属性的默认值定义在<code>ht.Default.treeViewRowLineVisible</code>上，因此可通过<code>treeView.setRowLineVisible(true)</code>改变具体组件实例，
也可通过配置<code>ht.Default.treeViewRowLineVisible</code>属性达到全局修改所有<code>TreeView</code>实例的效果。</p>

<p><code>ht.Default</code>中出了定义了默认参数外，还包含很多工具函数，以下例子是对所有属性参数，以及工具函数使用的描述说明：</p>

<p><iframe src="examples/example_htdefault.html" style="height:500px"></iframe></p>

<div id="ref_style"></div>

<h3>ht.Style</h3>

<p><code>ht.Style</code>定义了所有在<code>GraphView</code>和<code>Graph3dView</code>组件上显示的图元的<code>style</code>默认属性，创建<code>Node</code>和<code>Edge</code>这些图元实例对象时，
其对象自身的<code>style</code>属性为空，调用<code>getStyle(name)</code>函数时，如果该属性未设置，则<code>HT</code>会通过<code>ht.Style</code>的全局定义的默认值获取信息，
如果通过<code>setStyle(name, value)</code>的方式设置了具体对象属性后，<code>getStyle(name)</code>则会返回具体被设置的属性信息。</p>

<p>以下为<code>ht.Style</code>所有预定义的参数属性描述说明：</p>

<p><iframe src="examples/example_htstyle.html" style="height:500px"></iframe></p>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
